"use strict";

import * as React from 'react'

const {View, ScrollView, StyleSheet, StatusBar, TouchableOpacity} = require('react-native');
import NavRightButton from "../../component/RightButton";

const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {List} = require('antd-mobile');
const {Actions} = require("react-native-router-flux");
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import WhiteSpace from "../../component/WhiteSpace";
import Colors from "../../assets/styles/Colors";
import {SCREEN_WIDTH} from "../../constant";
import Avatar from "../../component/Avatar";
import MyText from "../../component/MyText";
import {AuthPage} from "../../interface/router";


class Member extends React.Component<AuthPage, any> {


    componentDidMount(): void {
    }

    goTo = (sceneKey: string, props?: object) => {
        Actions.push(sceneKey, props);
    };
    signOut = () => {
        this.props.dispatch({type: 'auth/signOut'})
    };

    getTip = () => {
        let tip = '您已用完所有内含配额。按每个配额¥160的价格预订跟多房间';
        if (Number(this.props.auth.userInfo.paid) > 0) {
            tip = `您现在可用配额为${this.props.auth.userInfo.paid}。`
        }
        return tip;
    };

    renderHeader = () => {
        return (
            <View style={[commonStyles.centerVH, {
                width: SCREEN_WIDTH,
                height: autoSize(208),
                backgroundColor: Colors.Primary
            }]}>
                <TouchableOpacity onPress={Actions.userProfile.bind(this, {
                    canEdit: true,
                    userInfo: this.props.auth.userInfo,
                    createdType: 'edit'
                })}>
                    <Avatar source={{uri: this.props.auth.userInfo.avatar + ''}} style={[commonStyles.centerVH]}
                            size={100}/>
                </TouchableOpacity>

                <MyText color={Colors.White} fontSize={20}
                        style={{marginTop: 10}}>{this.props.auth.userInfo.nickName}</MyText>
            </View>
        )
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <StatusBar barStyle="light-content"/>
                <View style={{height: 20, backgroundColor: Colors.Primary}}/>
                <ScrollView>
                    <List renderHeader={this.renderHeader}>
                        <View style={[commonStyles.flexRow, {padding: 10}]}>
                            <Avatar source={{uri: this.props.auth.userInfo.avatar}} circle={false} size={autoSize(65)}/>
                            <View style={[commonStyles.flex1, {marginLeft: 10, justifyContent: 'center'}]}>
                                <MyText>{this.props.auth.userInfo.nickName}</MyText>
                                <MyText>{this.props.auth.userInfo.company.name}</MyText>
                            </View>
                        </View>
                        <View style={[{padding: 10, borderBottomWidth: 0.5, borderBottomColor: Colors.Background}]}>
                            <MyText color={Colors.SubTitle}
                                    fontSize={14}>预定配额</MyText>
                            <MyText color={Colors.Title}
                                    numberOfLines={0}
                                    style={{marginTop: 5}}
                                    fontSize={16}>{this.getTip()}</MyText>
                        </View>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'printerUsage')}>打印用法</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'invoiceList')}>查看发票</List.Item>
                        <WhiteSpace color={Colors.Background}/>
                        <List.Item arrow='horizontal'
                                   onClick={this.goTo.bind(this, 'configNoticePage')}>配置通知</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'changePassword')}>修改密码</List.Item>
                        <WhiteSpace color={Colors.Background}/>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'support')}>支持</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'about')}>关于</List.Item>
                        <List.Item arrow='horizontal' onClick={this.signOut}>退出</List.Item>
                    </List>
                </ScrollView>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flex: 1,
        backgroundColor: '#efefef'
    }
});

export default connect(
    ({auth}) => ({auth})
)(Member)